<template>
  <div class="" style="margin-top: 20px">
    <el-form ref="formRef" label-width="150px" :model="form" :rules="rules">
      <el-form-item label="轴数" prop="AxlesNum">
        <el-input v-model="form.AxlesNum" />
      </el-form-item>
      <el-form-item label="X行程" prop="XStroke">
        <el-input v-model="form.XStroke" />
      </el-form-item>
      <el-form-item label="Y行程" prop="YStroke">
        <el-input v-model="form.YStroke" />
      </el-form-item>
      <el-form-item label="Z行程" prop="ZStroke">
        <el-input v-model="form.ZStroke" />
      </el-form-item>
      <el-form-item label="X快移" prop="XRapid">
        <el-input v-model="form.XRapid" />
      </el-form-item>
      <el-form-item label="Y快移" prop="YRapid">
        <el-input v-model="form.YRapid" />
      </el-form-item>
      <el-form-item label="Z快移" prop="ZRapid">
        <el-input v-model="form.ZRapid" />
      </el-form-item>
      <el-form-item label="主轴类型" prop="MajorAxleType">
        <el-input v-model="form.MajorAxleType" />
      </el-form-item>
      <el-form-item label="主轴扭矩" prop="MajorAxleTorqu">
        <el-input v-model="form.MajorAxleTorqu" />
      </el-form-item>
    </el-form>
    <div class="pay-button-group">
      <el-button @click="handleSubmit1">上一步</el-button>
      <el-button type="primary" @click="handleSubmit">下一步</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        formRef: null,
        form: {
          AxlesNum: '',
          XStroke: '',
          YStroke: '',
          ZStroke: '',
          XRapid: '',
          YRapid: '',
          ZRapid: '',
          MajorAxleType: '',
          MajorAxleTorqu: '',
        },
        rules: {
          AxlesNum: [
            { required: true, message: '请输入轴数', trigger: 'blur' },
          ],
          XStroke: [
            { required: true, message: '请输入X行程', trigger: 'blur' },
          ],
          YStroke: [
            { required: true, message: '请输入Y行程', trigger: 'blur' },
          ],
          ZStroke: [
            { required: true, message: '请输入Z行程', trigger: 'blur' },
          ],
          XRapid: [{ required: true, message: '请输入X快移', trigger: 'blur' }],
          YRapid: [{ required: true, message: '请输入Y快移', trigger: 'blur' }],
          ZRapid: [{ required: true, message: '请输入Z快移', trigger: 'blur' }],
          MajorAxleType: [
            { required: true, message: '请输入主轴类型', trigger: 'blur' },
          ],
          MajorAxleTorqu: [
            {
              required: true,
              message: '请输入主轴扭矩',
              trigger: 'blur',
            },
          ],
        },
      }
    },
    mounted() {},
    methods: {
      handleSubmit1() {
        this.$emit('change-step', 0)
      },
      handleSubmit() {
        this.$refs['formRef'].validate((valid) => {
          if (valid) {
            this.$emit('change-step', 5, { TransportInfo: this.form })
          } else {
            this.loading = false
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .pay-button-group {
    display: block;
    margin: 20px auto;
    text-align: center;
  }
</style>
